<script setup lang="ts">
import {getCompanyDetailsService, getCompanyJobListService} from "@/api/job.js";

import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getUserInfoService} from "@/api/user.js";

//获取用户信息
const userInfo = ref({})

async function getUserInfo(){
  let res = await getUserInfoService()
  userInfo.value = res.data
}

getUserInfo();

const route = useRoute();
const router = useRouter();
const companyId = route.params.companyId;

const companyDetails = ref({
  companyId: 'COMP12345',
  name: '示例科技有限公司',
  phone: '020-12345678',
  introduction: '我们是一家专注于技术创新的高科技企业，致力于提供前沿的解决方案和服务。',
  status: 'B轮',
  size: '1000-5000人',
  address: '广东省广州市天河区示例路1号',
  companyType: '互联网'
});

async function getCompanyDetails(){
  let res = await getCompanyDetailsService(companyId);
  companyDetails.value = res.data;
}

getCompanyDetails()


const companyJobList = ref([
  // 示例数据，实际应用中应从API获取
  {
    jobId: 'JOB123',
    name: '软件工程师',
    companyName: '示例科技',
    salary: '15k-30k',
    tags: 'Java, Spring Boot, Docker',
    location: '上海',
    hr: '张三',
    description: '负责软件开发...',
    degree: '本科',
    experience: '3-5年'
  }
]);

async function getCompanyJobList(){
  let res = await getCompanyJobListService(companyId);
  companyJobList.value = res.data;
}

getCompanyJobList()

// 查看详情按钮的点击处理函数
const viewJobDetails = (jobId) => {
  router.push(`/JobDetails/${jobId}`)
};


</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link active" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>公司详情</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>
          <li class="active">公司详情</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Employers Details Area -->
  <section class="employers-details-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <div class="hot-jobs-list">
            <!-- 使用Vue指令和表达式来动态展示数据 -->
            <div class="row align-items-center">
              <div class="col-lg-2">
              </div>
              <div class="col-lg-10">
                <div class="hot-jobs-content">
                  <h3>{{ companyDetails.name }}</h3>
                  <span class="sub-title">{{ companyDetails.companyType }}</span>
                  <ul>
                    <li><span>公司地址:</span> {{ companyDetails.address }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div class="employers-details-content preserve-newlines">
            {{ companyDetails.introduction }}
            <hr>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="employers-details-sidebar">
            <div class="employer-widget">
              <h3>Company Overview</h3>
              <ul class="overview">
                <li>
                  公司规模
                  <span>{{ companyDetails.size }}</span>
                </li>
                <li>
                  融资状态
                  <span>{{ companyDetails.status }}</span>
                </li>
                <li>
                  联系电话
                  <span>{{ companyDetails.phone }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="company-job-list" style="display: flex">
        <div
            v-for="(job, index) in companyJobList"
            :key="index"
            class="company-job-item"
        >
          <div class="company-job-info">
            <h4 class="company-job-name">{{ job.name }}</h4>
            <p><strong class="company-job-label">薪资:</strong> {{ job.salary }}</p>
            <p><strong class="company-job-label">标签:</strong> {{ job.tags }}</p>
            <p><strong class="company-job-label">学历要求:</strong> {{ job.degree }}</p>
            <p><strong class="company-job-label">工作经验:</strong> {{ job.experience }}</p>
          </div>
          <el-button type="primary" @click="viewJobDetails(job.jobId)" class="company-job-button">查看详情</el-button>
        </div>
      </div>

    </div>
  </section>
  <!-- End Employers Details Area -->

  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";

.preserve-newlines {
  white-space: pre-wrap;
}

.company-job-list {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.company-job-item {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 5px;
  padding: 20px;
  background-color: #fdfdfd;
  border: 1px solid #ddd; /* 初始化边框颜色 */
  transition: border-color 0.3s ease; /* 添加过渡效果，使得边框颜色变化平滑 */
  width: 300px;
}

.company-job-item:hover {
  border-color: #2041e1; /* 鼠标悬停时边框颜色变为蓝色 */
}

.company-job-info {
  margin-bottom: 10px;
}

.company-job-name,
.company-job-label {
  margin: 5px 0;
}

.company-job-label {
  font-weight: bold;
}

.company-job-button {
  width: 100%;
  height: 40px;
  display: block; /* 使按钮独占一行，易于居中 */
  margin: 10px auto 0 auto; /* 上边距10px，水平居中 */
  border-radius: 16px; /* 圆角矩形 */
  background-color: #007bff; /* 主色调，可自定义 */
  color: #ffffff; /* 文字颜色 */
  padding: 10px 20px; /* 增加内边距以调整按钮大小 */
  font-size: 14px; /* 字体大小 */
  text-align: center; /* 文字居中 */
  border: none; /* 移除默认边框 */
  cursor: pointer;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标悬停时的样式变化 */
.company-job-button:hover {
  background-color: #0056b3; /* 悬停时颜色变深，增强交互感 */
  transform: translateY(-2px); /* 微微上移，增加立体感 */
}

/* 鼠标点击时的样式变化 */
.company-job-button:active {
  background-color: #004085; /* 点击时颜色更深 */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 内阴影，模拟按下效果 */
}

</style>